<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/datatable.min.css">
		<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">	
		<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- <link rel="stylesheet" href="css/bootstrap-editable.css"> -->
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
		

		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="js/jquery.dataTables.min.js"></script>
		<script src="js/datatables.bootstrap.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/back.js"></script>
		<script src="js/datatable.js"></script>
		<script src="js/highchart.js" ></script>
		<script src="js/exporting.js" ></script>
		<script src="js/highchart-zhCN.js" ></script>
		<title>mtpos login Page</title>
	</head>
	<style>
		body,
		html {
			width: 100%;
			height: 100%;
		}
		
		body {
			/*background: #e9e9e9;*/
			overflow: hidden;
		}
		
		.settings {
			/*border:1px solid #000;*/
			height: 100%;
			float: left;
			width: 20%;
			background-color: #3a3a4f;
			position: relative;
		}
		
		.transaction {
			/*border:1px solid #000;*/
			height: 90%;
			float: left;
			width: 80%;
			background:#fff;
		}
		.top-info{
			/*border:1px solid #000;*/
			height: 8%;
			float: left;
			width: 80%;
			position: relative;
			background-color: #3a3a4f;
			display: table;
		}
		.top-info>div{
			position: relative;
			color:#fff;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			font-size: 1.5rem;
		}
		.settings-header {
			width: 100%;
			height: 10%;
			display: table;
		}
		.settings-header .logo{
			width:100%;
			height:100%;
			
		}
		/*.settings-header .text{
			width:60%;
			display: table-cell;
			color:#fff;
			text-align: center;	
			vertical-align: middle;	
			/*border:1px solid #000;*/
		}*/
		.settings-header .logo img{
			width:100%;
			height:100%;
		}
		.settings-list {
			width: 100%;
			height: 70%;
			color: #cad5e7;
		}
		
		.settings-list ul {
			width: 100%;
			height: 100%;
			/*border:1px solid red;*/
		}
		
		.settings-list ul li {
			width: 100%;
			height: 9%;
			/*border:1px solid blue;*/
			display: table;
			cursor: pointer;
		}
		
		.settings-list ul li:not(.active):hover {
			color: #8be77c;
		}
		.settings-title{
			width: 100%;
			/*height: 10%;*/
			position: absolute;
			bottom:5%;
			font-size: 1.5rem;
			/*color: #cad5e7;*/
			/*border:1px solid #000;*/
		}
		.settings-title>div{
			width: 50%;
			height:30%;
			float:left;	
			color: #cad5e7;
			/*border:1px solid #fff;*/	
			display: table;
		}
		.settings-title>div a{
			color: #cad5e7;
			display: table-cell;
			vertical-align: middle;
			text-align: center;	
			
		}
		.active{
			background: #8f85e8;
			position:relative;
			color:#ffffff;	
		}
		.active:after{
			content: "";
		    width: 0;
		    height: 0;
		    position: absolute;
		    right: 0;
		    margin-top:-10px;
		    top: 50%;
		    border-top: 10px solid transparent;
		    border-bottom: 10px solid transparent;
		    border-right: 10px solid #eee;
		    z-index: 1;
		}
		.settings-list ul li span {
			width: 100%;
			height: 100%;
			/*border:1px solid blue;*/
			display: table-cell;
			/*text-align: center;*/
			text-indent: 2rem;
			vertical-align: middle;
			font-size: 1.7rem;
		}
		
		.product {
			width: 100%;
			height: 100%;
			/*border: 1px solid green;*/
			float: left;
			display: none;
			position:relative;
		}
		
		.product-type-search {
			width: 100%;
			height: 4.5rem;
			/*border:1px solid green;*/
		}
		
		.product-type {
			display: -webkit-flex;
			/* Safari */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			align-content: flex-start;
			position: relative;
		}
		
		.product-type-cell {
			width: 13rem;
			height: 4.5rem;
			/* border: 1px solid #000; */
			margin: 1rem;
			position: relative;
			display: table;
			background: #3a3a4f;
			cursor: pointer;
		}
		.product-type-cell:hover{
			-moz-box-shadow:  0 15px 15px rgba(0,0,0,.4); /* 老的 Firefox */
			box-shadow: 0 15px 15px rgba(0,0,0,.4);
		}
		.product-type-cell a {
			position: absolute;
			/*border:1px solid #000;*/
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			top: 0;
			right: 0;
			width: 1.8rem;
			height: 1.8rem;
			color: #fff;
			background:#8f85e8;
			text-decoration:none;
		}
		
		.product-type-cell a:hover {
			color: #8be77c;
		}
		
		.product-type-cell span {
			border: 1px solid #000;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			color: #cad5e7;
			min-height:50%;
		}
		.product-type-cell input {
			border: none;
			display: table-cell;
			background: inherit;
			text-align: center;
			vertical-align: middle;
			color: #cad5e7;
		}
		.product-type-cell input:focus{
			color: #fff;
		}
		
		.product-type-cell span{
			cursor: pointer;
			font-size:1.5rem;
		}
		
		.product-type-cell span:hover {
			color: #8be77c;
		}
		.add-product-type{
			position: absolute;
			right:5%;
			/*top*/
		}
		.man{
			height:7%;
			/* border:1px solid #000; */
			padding:0 6%;
			background:#3a3a4f;
			margin-bottom:-1px;
		}
		.man ul{
			height:100%;
			width:100%;
		}
		.man ul li{
			display:table;
			height:100%;
			float:left;
			background:#565669;
			min-width:12%;
			margin:0 2px;
		}
		.man ul li span:not(.disabled-theme){
			display:table-cell;
			vertical-align:middle;
			text-align:center;
			color:#eee;
			font-weight:700;
			cursor:pointer;
		}
		.man ul li span:hover{
			color:#90ef7f;
		}
		.disabled-theme{
			pointer-events: none;
			background-color: #fff;
		    color: #333;
		    display:table-cell;
			vertical-align:middle;
			text-align:center;
			font-weight:700;
		}
		.product-detail-add {
			width: 100%;
			height: 93%;
			overflow-y:auto;
			position:absolute;
			z-index:99;
			background:#fff;
		}
		.productTypeTable{
			height: 93%;
			overflow-x:hidden;
			overflow-y:auto;
			background:#fff;
			position:absolute;
		}
		#productTypeTable{
			width:100%;	
		}
		#productTypeTable tr{
			width:100%;
		}
		#productTypeTable thead th{
			text-align:center;
			vertical-align:middle;
		}
		#productTypeTable tbody td{
			text-align:center;
			vertical-align:middle;
		}
		#productTypeTable tbody input{
			border:none;
			width:100%;
			background:inherit;
		}
		.chart{
			width: 100%;
			height: 93%;
			position:absolute;
			background:#fff;
		}
		.chart-content-1{
			z-index:99;
		}
		.suffAccount{
			width:100%;
			height: 93%;
		    overflow-x: hidden;
		    overflow-y: auto;
		    background: #fff;
		    position: absolute;
		}
		#suffAccountTable{
			width:100%;
			height:100%;
		}
		.addSaff{
			width:100%;
			height:100%;
		}
		.manStaff{
			width:100%;
			height:100%;
			display:none;
		}
		#addStaffDetail{
			
		}
		#addStaffDetail th,td{
			vertical-align:middle;
			text-align:center;
		}
		#addStaffDetail td{
			font-size:1.6rem;
			/* font-weight:300; */
		}
		#suffAccountTable .focusControl{
			border:0;
			background:inherit;
			width:6rem;
			padding:0.4rem 0.3rem;
			text-align:center;
			border:1px solid  #ddd;
			border-radius:3px;
		}
		#suffAccountTable .focusControl:focus{
			-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; */
			border-color:#66afe9;
			-webkit-box-shadow:0 0 18px rgba(102,175,233,.6);
		}
	</style>

	<body>
		<!-- <div class="alert alert-warning alert-position">
			<a href="#" class="close" data-dismiss="alert">
				&times;
			</a>
			<strong>警告！</strong><span></span>
		</div> -->
		<div class="settings">
			<div class="settings-header">
				<div class="logo">
					<img src="img/logo.png">
				</div>
				<!--<div class="text">
					<p>你好，<span>1001</span></p>
					<span id="time"></span>
				</div>-->
			</div>
			<div class="settings-list">
				<ul>
					<li class="active"><span>管理商品种类</span></li>
					<li onclick="getProductType(this);getProduct();"><span>管理商品</span></li>
					<!-- <li><span>查看交班</span></li> -->
					<li><span>管理员工</span></li>
					<li onclick="chart()"><span>财务报表</span></li>
					<!-- <li><span>管理员信息</span></li> -->
				</ul>
			</div>
			<div class="settings-title">
				<div class="backend">
					<a href="#">后台管理系统</a>
				</div>
				<div class="frontend">
					<a href="index.html">pos收银系统</a>
				</div>
			</div>
		</div>
		<div class="top-info">
			<div class="welconme">
				<span>你好，</span><span id="sessionUser">你好</span>
			</div>
			<div class="time">
				<span id="time"></span>
			</div>
			<div class="sign-out">
				<button class="btn btn-danger">退出登录</button>
			</div>
		</div>
		<div class="transaction">
			<div class="product product-type">
				<div class="product-type-search form-control">
					<form class="form-inline" role="form">
							<label class="form-label">搜索商品类型</label>
							<input oninput="searchProductType(this)" type="text" placeholder="请输入商品类别名称" class="form-control">
							<button type="button" class="btn btn-sm btn-default add-product-type" data-toggle="modal" title="点击增加新的商品类型" data-target="#addPro">增加商品类型</button> 
					</form>
				</div>
<!-- 				<div class="product-type-cell changeable" data-toggle="tooltip"  title="点击输入新的名称">
					<a href="javascript:deleteProductType(this)">X</a>
					<span>123123</span>
				</div> -->
				<!--<div class="product-type-cell add-product-type" data-toggle="modal" title="点击增加新的商品类型" data-target="#addPro">
					<span>增加商品类型</span>
				</div>-->
			</div>
			<div class="product product-detail">
				<div class="product-man-nav man">
					<ul>
						<li><span class="disabled-theme">增加商品</span></li>
						<li><span>管理商品</span></li>
					</ul>
				</div>
				<div class="product-detail-add">
					<table class="table" id="addProductDetail">
						<thead>
							<tr>
								<th>商品名称</th>
								<th>商品类型</th>
								<th>规格</th>
								<th>描述</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="text" class="form-control"></td>
								<td class="col-lg-2">
									<select class="productSelector form-control">
									</select>
								</td>
								<td class="col-lg-5">
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" type="button">大杯</button>
						                    </span>
											<input type="number" min="0" max="99" class="form-control">
										</div>
										<!-- /input-group -->
									</div>
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" min="0" max="99" type="button">中杯</button>
						                    </span>
											<input type="number" class="form-control">
										</div>
										<!-- /input-group -->
									</div>
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" min="0" max="99" type="button">小杯</button>
						                    </span>
											<input type="number" class="form-control">
										</div>
									</div>
								</td>
								<td class="col-lg-2">
									<input type="text" class="form-control">
								</td>
								<td>
									<a href="javascript:void(0)"  class="btn btn-link disabled" >删除</a>
								</td>
							</tr>
							<!-- <tr>
								<td><input type="text" class="form-control"></td>
								<td class="col-lg-2">
									<select class="productSelector form-control">
									</select>
								</td>
								<td class="col-lg-5">
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" type="button">大杯</button>
						                    </span>
											<input type="number" min="0" max="99" class="form-control">
										</div>
										/input-group
									</div>
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" min="0" max="99" type="button">中杯</button>
						                    </span>
											<input type="number" class="form-control">
										</div>
										/input-group
									</div>
									<div class="col-lg-4">
										<div class="input-group">
											<span class="input-group-btn">
						                        <button class="btn btn-default" min="0" max="99" type="button">小杯</button>
						                    </span>
											<input type="number" class="form-control">
										</div>
									</div>
								</td>
								<td class="col-lg-2">
									<input type="text" class="form-control">
								</td>
								<td>
									<a href="javascript:void(0)" class="btn btn-link" >删除</a>
								</td>
							</tr> -->
						</tbody>
					</table>
					<!-- <button class="btn btn-lg btn-primary">新增一条</button> -->
					<button class="btn btn-primary" onclick="deteleProductListItem(this)">重置</button>
					<button onclick="addProduct()" class="btn btn-primary">确认</button>
				</div>
				<div class="productTypeTable">
					<table class="table table-hover table-striped table-bordered" id="productTypeTable">
						<caption>商品清单</caption>
						<thead>
							<tr>
								<th>商品编码</th>
								<th>商品类型</th>
								<th>商品名字</th>
								<th>商品编码</th>
								<th>规格</th>
								<th>创建时间</th>
								<th>更新时间</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
	
						</tbody>
					</table>
				</div>
			</div>
			<!-- <div class="product">
				<div class="shiftExchange">
					<table class="table table-hover" id="shiftExchange">
						<caption>交班报告</caption>
						<thead>
							<tr>
								<th>员工名字</th>
								<th>员工号</th>
								<th>上班时间</th>
								<th>下班时间</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
	
						</tbody>
					</table>
				</div>
			</div> -->
			<div class="product">
				<div class="chart-man-nav man">
					<ul>
						<li><span class="disabled-theme">增加员工</span></li>
						<li onclick="findAllStaff()" ><span>管理员工</span></li>
					</ul>
				</div>
				<div class="addStaff">
					<table class="table" id="addStaffDetail">
						<thead>
							<tr>
								<th>员工名字</th>
								<th>性别</th>
								<th>电话</th>
								<th>账号</th>
								<th>密码</th>
								<th>等级</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="text" class="form-control"></td>
								<td class="col-lg-2">
									<label><input type="radio" value="男" name="staffSex"/>男&nbsp&nbsp</label>
									<label><input type="radio" value="女" name="staffSex"/>女&nbsp&nbsp</label>
								</td>
								<td>
									<input type="tel" placeholder="只可以输入数字"  onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" name=""/>
								</td>
								<td>
									<input type="number" placeholder="仅输4位数字" oninput="if(value.length>4)value=value.slice(0,4)"  class="form-control">
								</td>
								<td>
									<input type="text" minlength="4" placeholder="仅输4位数字和英文" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="4" class="form-control">
								</td>
								<td class="col-lg-2">
									<label><input type="radio" value="admin" name="staffRole"/>管理员</label>
									<label><input type="radio" value="staff" name="staffRole"/>普通用户</label>
								</td>
								<td>
									<input type="text" class="form-control">
								</td>
								<td>
									<a href="javascript:void(0)"  class="btn btn-link disabled" >删除</a>
								</td>
							</tr>
						</tbody>
					</table>
					<!-- <button class="btn btn-lg btn-primary">新增一条</button> -->
					<button class="btn btn-primary" onclick="deteleProductListItem(this)">重置</button>
					<button onclick="addStaff()" class="btn btn-primary">确认</button>
				</div>
				<div class="manStaff">
					<div class="suffAccount">
						<table class="table table-hover table-striped table-bordered" id="suffAccountTable">
							<caption>员工账号</caption>
							<thead>
								<tr>
									<th>员工id</th>
									<th>员工名字</th>
									<th>性别</th>
									<th>电话</th>
									<th>入职时间</th>
									<th>登录账号</th>
									<th>登录密码</th>
									<th>级别</th>
									<th>备注</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="product">
				<div class="chart-man-nav man">
					<ul>
						<li><span class="disabled-theme">月销售报表</span></li>
						<li onclick="chart1()"><span>产品分类销售汇总报表</span></li>
					</ul>
				</div>
				<div class="chart-content-1 chart">
					<!-- <div class="search-chart form-group">
						<input type="date" class="form-control" />
					</div> -->
					<div class="form-inline search-chart">
		                <div class="input-group">
		                    <select id="yearRange" class="form-control">
		                    	<option value="3" >请输入年份范围</option>
		                    	<option value="3">近三年</option>
		                    	<option value="5">近五年</option>
		                    	<option value="10">近十年</option>
		                    </select>
		                    <span class="input-group-btn">
		                        <button class="btn btn-success" onclick="chart()" type="button">生成报表</button>
		                    </span>
		                </div>
		            </div>
					<div id="monSaleChart"></div>
				</div>
				<div class="chart-content-2 chart">
					<div class="form-inline search-chart">
						<div class="input-group ">
							<span class="input-group-btn">
		                       	 <a class="btn btn-link">开始时间</a>
		                    </span>
		                    <input type="date" value="2016-01-01" class="form-control beginTime" />
		                    <!-- <span class="input-group-btn">
		                        <button class="btn btn-default" type="button">Go!</button>
		                    </span> -->
		                </div>
		                <div class="input-group">
		                	<span class="input-group-btn">
		                       	 <a class="btn btn-link">结束时间</a>
		                    </span>
		                    <input type="date" value="2016-12-31" class="form-control endTime" />
		                    <span class="input-group-btn">
		                        <button class="btn btn-success" onclick="chart1()" type="button">生成报表</button>
		                    </span>
		                </div>
		            </div>
					<div id="proSaleChart"></div>
				</div>
			</div>
			<!-- <div class="product">
				<div class="superMan">
					<table class="table table-hover" id="superMan">
						<caption>管理员信息</caption>
						<thead>
							<tr>
								<th></th>
								<th></th>
								<th></th>
								<th></th>
								<th></th>
								<th></th>
							</tr>
						</thead>
						<tbody>
	
						</tbody>
					</table>
				</div>
			</div> -->
		</div>
		<div class="modal fade" id="addPro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							添加商品类别
						</h4>
					</div>
					<div class="modal-body">
						<ul id="addProType">
							<li>
								<div class="input-group">
									<input type="text" placeholder="输入商品类别名" class="form-control">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">
											<i class="fa fa-times" aria-hidden="true"></i>
										</button>
									</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">暂时不要
						</button>
						<button onclick="addProductType(this)" type="button" class="btn btn-primary">
							提交全部
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</body>

</html>
<script language="JavaScript">
	
</script>